<template>
	<view style="">
		<!-- 顶部导航 -->
		<view class="" style="background-color: white;">
			<image style="width: 100%;" src="../../static/ui/hotrank.png" mode="heightFix"></image>
			<view class=""
				style="display: flex;justify-content: space-between;color: black;position: fixed;top: 0;margin-top: 30px;width: 100%;padding: 0 10px;">
				<u-icon size="55" name="arrow-left" @click="backtoMarket"></u-icon>
				<u-icon size="55" name="more-dot-fill"></u-icon>
			</view>
		</view>


		<!-- 热点话题 -->
		<view class="" style="background-color: white;padding: 9px;">
			<view class="">
				<span style="font-size: 30rpx;font-weight: 1000;">热点话题</span>
			</view>
			<!-- 每一个item -->
			<view v-for="(hotItem,index) in hotList" :key="hotItem.id" class="topicItem"
				style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
				<view class="" style="display: flex;align-items: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
					<span v-if="!item.label" style="font-size: 30rpx;font-weight: 700;">1</span>
					<img style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/hotjinhao.png" alt="">
					<span
						style="font-size: 30rpx;font-weight: 900;margin-left: 5px;max-width: 50%; box-sizing: border-box; display: inline-block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{hotItem.title}}</span>
					<image style="height: 20px;margin-left: 5px;" v-if="hotItem.label === '1'" src="@/static/ui/fresh.png" mode="heightFix"></image>
					<image style="height: 20px;margin-left: 5px;" v-if="hotItem.label === '2'" src="@/static/ui/delicious.png" mode="heightFix"></image>
					<image style="height: 20px;margin-left: 5px;" v-if="hotItem.label === '3'" src="@/static/ui/amazing.png" mode="heightFix"></image>

				</view>
				<view class="">
					<span style="color: #ccc;">{{hotItem.popularity}}w人气</span>
				</view>
			</view>

		</view>

		<!-- 最新话题 -->
		<view class="" style="background-color: white;margin-top: 6px;padding: 9px;">
			<view class="">
				<span style="font-size: 30rpx;font-weight: 1000;">最新话题</span>
			</view>
			<!-- 每一个item -->
			<view v-for="newItem in newList" :key="newItem.id" class="topicItem"
				style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
				<view class="" style="display: flex;align-items: center;">
					<span style="font-size: 40rpx;font-weight: 700;">·</span>
					<img v-if="newItem.sort === 1" style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/jinhao.png" alt="">
					<img v-if="newItem.sort === 2" style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/hotjinhao.png" alt="">
					<img v-if="newItem.sort === 3" style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/chaohua.png" alt="">
					<span style="font-size: 30rpx;font-weight: 900;margin-left: 5px;">{{newItem.title}}</span>
				</view>

			</view>

		</view>

		<!-- 更多话题 -->
		<view class="" style="background-color: white;margin-top: 6px;padding: 9px;">
			<view class="">
				<span style="font-size: 30rpx;font-weight: 1000;">更多话题</span>
			</view>

			<!-- 每一个item -->
			<view v-for="moreItem in moreList" :key="moreItem.id" class="topicItem"
				style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
				<view class="" style="display: flex;align-items: center;">
					<span style="font-size: 40rpx;font-weight: 700;">·</span>
					<img v-if="moreItem.sort === 1" style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/jinhao.png" alt="">
					<img v-if="moreItem.sort === 2" style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/hotjinhao.png" alt="">
					<img v-if="moreItem.sort === 3" style="width: 20px;height: 20px;margin-left: 7px;" src="@/static/ui/chaohua.png" alt="">
					<span style="font-size: 30rpx;font-weight: 900;margin-left: 5px;">{{moreItem.title}}</span>
				</view>

			</view>

		</view>






	</view>
</template>

<script>
	export default {
		data() {
			return {
			
				hotList: [],
				newList: [],
				moreList: []
			};
		},
		mounted() {
			this.getRankDetail()
		},
		computed: {

		},
		methods: {
			backtoMarket() {
				uni.navigateBack()
			},
			async getRankDetail() {
				const result = await this.$u.api.getTopicRankDetail()
				this.newList = result.new
				this.hotList = result.hot
				this.moreList = result.more

			}
		}
	}
</script>

<style lang="scss" scoped>

</style>